<template>
  <view class="tab-bar" v-if="shouldShow">
    <view class="tab-item" v-for="(item, index) in tabList" :key="index"
          @click="switchTab(index, item.pagePath)">
      <image :src="selected === index ? item.selectedIconPath : item.iconPath" class="tab-icon"></image>
      <text :class="selected === index ? 'tab-text-active' : 'tab-text'">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'CustomTabBar',
  data() {
    return {
      selected: 0,
      // 定义不同角色的导航配置
      roleTabs: {
        // 求职者角色导航
        USER: [
          {
            pagePath: '/pages/index/index',
            text: '首页',
            iconPath: '/static/shouye.png',
            selectedIconPath: '/static/shouye2.png'
          },
          {
            pagePath: '/pages/job/job',
            text: '职位推荐',
            iconPath: '/static/zhiweituijian.png',
            selectedIconPath: '/static/zhiwei.png'
          },
          {
            pagePath: '/pages/aiAssistant/aiAssistant',
            text: 'AI助手',
            iconPath: '/static/AIzhushou.png',
            selectedIconPath: '/static/AI.png'
          },
          {
            pagePath: '/pages/policy/policy',
            text: '就业指导',
            iconPath: '/static/zhengcezhipei.png',
            selectedIconPath: '/static/zhengce.png'
          },
          {
            pagePath: '/pages/mine/mine',
            text: '我的',
            iconPath: '/static/wode2.png',
            selectedIconPath: '/static/wode.png'
          }
        ],
        // 企业角色导航
        EMPLOY: [
          {
            pagePath: '/pages/index/index',
            text: '首页',
            iconPath: '/static/shouye.png',
            selectedIconPath: '/static/shouye2.png'
          },
          {
            pagePath: '/employPages/jobRecommendation/jobRecommendation',
            text: '职位推荐',
            iconPath: '/static/zhiweituijian.png',
            selectedIconPath: '/static/zhiwei.png'
          },
		  {
		    pagePath: '/employPages/employPolicy/employPolicy',
		    text: '就业政策',
		    iconPath: '/static/zhengcezhipei.png',
		    selectedIconPath: '/static/zhengce.png'
		  },
          {
            pagePath: '/employPages/employMine/employMine',
            text: '我的',
            iconPath: '/static/wode2.png',
            selectedIconPath: '/static/wode.png'
          }
        ]
      }
    };
  },
  computed: {
    ...mapState(['role', 'showTabBar']),
    shouldShow() {
      // 根据Vuex状态控制是否显示导航栏
      return this.showTabBar;
    },
    tabList() {
      console.log('当前角色:', this.role);
      // 确保角色有效
      const validRoles = ['USER', 'EMPLOY'];
      const currentRole = validRoles.includes(this.role) ? this.role : 'USER';
      return this.roleTabs[currentRole] || this.roleTabs.USER;
    }
  },
  methods: {
    switchTab(index, path) {
      this.selected = index;
      // 使用switchTab进行页面切换
      uni.switchTab({
        url: path
      });
    }
  },
  mounted() {
    // 初始化当前选中项
    const pages = getCurrentPages();
    if (pages.length > 0) {
      const currentPage = pages[pages.length - 1];
      const currentPath = '/' + currentPage.route;
      const index = this.tabList.findIndex(item => item.pagePath === currentPath);
      if (index !== -1) {
        this.selected = index;
      }
    }
  },
  // 监听角色变化
  watch: {
    role(newRole, oldRole) {
      console.log('角色发生变化:', oldRole, '->', newRole);
      // 重新计算选中项
      this.$nextTick(() => {
        const pages = getCurrentPages();
        if (pages.length > 0) {
          const currentPage = pages[pages.length - 1];
          const currentPath = '/' + currentPage.route;
          const index = this.tabList.findIndex(item => item.pagePath === currentPath);
          if (index !== -1) {
            this.selected = index;
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 20rpx; /* 将原来的0改为20rpx，使导航栏离底部有间距 */
  left: 0rpx; /* 添加左右间距 */
  right: 0rpx; /* 添加左右间距 */
  z-index: 9999;
  border-radius: 15rpx; /* 可选：添加圆角使效果更美观 */
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  flex: 1;
  text-align: center;
}
.tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.tab-text {
  font-size: 12px;
  color: #999999;
  font-weight: normal;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-text-active {
  font-size: 12px;
  color: #007aff;
  font-weight: bold;
  line-height: 1.2;
}
</style>